<template>
  <div @click="$router.push('/postdetail/' + postData.id)">
    <div
      class="siglePicPost"
      v-if="
        postData.type == 1 &&
        postData.cover.length > 0 &&
        postData.cover.length < 3
      "
    >
      <div class="left">
        <div class="title">{{ postData.title }}</div>
        <div class="info">
          <span class="name">{{ postData.user.nickname }}</span>
          {{ postData.comment_length }}跟帖
        </div>
      </div>
      <img :src="postData.cover[0].url | fixImgUrl" alt="" class="right" />
    </div>
    <div
      class="threePicWrapper"
      v-if="postData.type == 1 && postData.cover.length >= 3"
    >
      <div class="title">{{ postData.title }}</div>
      <img :src="postData.cover[0].url | fixImgUrl" alt="" />
      <img :src="postData.cover[1].url | fixImgUrl" alt="" />
      <img :src="postData.cover[2].url | fixImgUrl" alt="" />
      <div class="info">
        <span class="name">{{ postData.user.nickname }}</span>
        {{ postData.comment_length }}跟帖
      </div>
    </div>
    <div
      class="videoPost"
      v-if="postData.type == 2 && postData.cover.length > 0"
    >
      <div class="title">{{ postData.title }}</div>
      <div class="videoCover">
        <img :src="postData.cover[0].url | fixImgUrl" alt="" />
        <span class="iconfont iconshipin"></span>
      </div>
      <div class="info">
        <span class="name">{{ postData.user.nickname }}</span>
        {{ postData.comment_length }}跟帖
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["postData"],
};
</script>

<style lang="less" scoped>
.siglePicPost {
  display: flex;
  padding: 20/360 * 100vw 10/360 * 100vw 12/360 * 100vw;
  border-bottom: 1px solid #ccc;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    .title {
      font-size: 18/360 * 100vw;
      font-weight: bold;
      color: #333;
    }
    .info {
      font-size: 14/360 * 100vw;
      color: #888;
      .name {
        padding-right: 8/360 * 100vw;
      }
    }
  }
  .right {
    width: 121/360 * 100vw;
    height: 75/360 * 100vw;
    object-fit: cover;
  }
}
.threePicWrapper {
  padding: 20/360 * 100vw 10/360 * 100vw 12/360 * 100vw;
  border-bottom: 1px solid #ccc;
  .title {
    font-size: 18/360 * 100vw;
    font-weight: bold;
    color: #333;
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
    .name {
      padding-right: 8/360 * 100vw;
    }
  }
  img {
    width: 33%;
    margin: 5/360 * 100vw 0 10/360 * 100vw;
    object-fit: cover;
  }
}
.videoPost {
  padding: 20/360 * 100vw 10/360 * 100vw 12/360 * 100vw;
  border-bottom: 1px solid #ccc;
  .title {
    font-size: 18/360 * 100vw;
    font-weight: bold;
    color: #333;
  }
  .info {
    font-size: 14/360 * 100vw;
    color: #888;
    .name {
      padding-right: 8/360 * 100vw;
    }
  }
  .videoCover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    img {
      width: 100%;
      height: 170/360 * 100vw;
      object-fit: cover;
      margin: 5/360 * 100vw 0 10/360 * 100vw;
    }
    .iconshipin {
      position: absolute;
      font-size: 46/360 * 100vw;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 50%;
    }
  }
}
</style>